<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 13:30:57
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-13 16:34:44
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractFileSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 续签意向表预览确认发起 -->
<template>
  <div class="container" v-show="previewData.data.length > 0">
    <div v-if="scroll">
      <a-anchor class="anchor" :change-hash="false" :scroll-container="scroll">
        <a-anchor-link
          v-for="item in previewData.data"
          :href="`#${item.id}`"
          :key="item.id"
          >{{ item.cnName }}</a-anchor-link
        >
      </a-anchor>
    </div>
    <a-scrollbar
      style="height: calc(100vh - 216px); overflow: auto"
      id="scrollBar"
    >
      <div v-for="item in previewData.data" :key="item.id" :id="item.id">
        <div :id="item.collectionId">
          <div class="title-box">
            <div class="title">
              <div
                :style="{
                  marginLeft: '20px'
                }"
              >
                {{ item.cnName }}
              </div>
            </div>
          </div>
          <a-form ref="HumanForm" :model="item.controlModel" autoLabelWidth>
            <a-row :gutter="16">
              <a-col
                v-for="(ele, index) in item.controlModel"
                :key="index"
                :span="(ele?.span as number)"
              >
                <FormItem
                  :disabled="
                    (!flag &&
                      ele.ctlCode !== 'CFC9CEC1B96504D259BB7DB35427C3C38') ||
                    haveValControlCodesEnums.includes(ele.ctlCode)
                  "
                  :componentType="(ele?.ctlComponentType as string)"
                  :props="(ele?.props as any)"
                  :name="(ele?.ctlCnName as string)"
                  :required="(ele?.required as any)"
                  v-model:values="ele.controlValue"
                  :code="(ele?.ctlCode as any)"
                />
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
    </a-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { GetBusinessModalData } from '@/apis/controltotal';
import FormItem from '@/components/DynamicFormsNew/RenderingForm/FormItem/index.vue';
import { useVModel } from '@vueuse/core';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const formData = useVModel(props, 'data', emit);

// CFC9CEC1B96504D259BB7DB35427C3C38
let previewData = reactive({
  data: []
});
let scroll = ref(); // 定义一个scroll储存scrollbar的Dom用来锚点跳转
let flag = ref(false); // 判断用户是否点击同意或者不同意续签
watch(
  () => props.data.previewData,
  (newVal: any) => {
    if (newVal) {
      previewData.data = cloneDeep(newVal);

      getDetail();
      console.log(
        '===========newValnewValnewValnewVal========================='
      );
      console.log(props.data);
      console.log(previewData.data[0].controlModel);
      console.log('====================================');
    }
  },
  {
    deep: true
  }
);

watch(
  () => previewData.data,
  (newVal: any) => {
    if (newVal) {
      flag.value =
        previewData.data[0].controlModel.filter((ele: any) => {
          if (ele.ctlCode === 'CFC9CEC1B96504D259BB7DB35427C3C38') return ele;
        })[0]?.controlValue === '同意'
          ? true
          : false;
    }
  },
  {
    deep: true
  }
);

// 默认赋值并且不能修改的控件
let haveValControlCodesEnums = [
  'C62B8DC31189847E0972B5D8F721404B1', // 姓名
  'CDC80FC12D1DE43018D098E8322D0F966', // 工号
  'CA8ABCC1480744557B3014C3454465A7E', // 公司
  'CED44AC9966904CD1AB546D309903727C', // 部门
  'C7341027925C943708F3AEF98703ECC47' // 职位
];

const getDetail = () => {
  let temp = cloneDeep(props.data.userData[0]);
  previewData.data[0].controlModel = previewData.data[0].controlModel.map(
    (ele: any) => {
      switch (ele.ctlCode) {
        // 姓名
        case 'C62B8DC31189847E0972B5D8F721404B1':
          ele.controlValue = temp.name;
          break;
        // 工号
        case 'CDC80FC12D1DE43018D098E8322D0F966':
          ele.controlValue = temp.jobNum;
          break;
        // 公司
        case 'CA8ABCC1480744557B3014C3454465A7E':
          ele.controlValue = temp.companyId;
          break;
        // 部门
        case 'CED44AC9966904CD1AB546D309903727C':
          ele.controlValue = temp.departmentId;
          break;
        // 职位
        case 'C7341027925C943708F3AEF98703ECC47':
          ele.controlValue = temp.positionName;
          break;
        default:
          break;
      }
      return ele;
    }
  );
};

// watch(
//   () => props.data.userData,
//   (newVal: any) => {
//     if (previewData.data.length > 0) {
//       let temp = newVal[0];
//       previewData.data[0].controlModel = previewData.data[0].controlModel.map(
//         (ele: any) => {
//           switch (ele.ctlCode) {
//             // 姓名
//             case 'C62B8DC31189847E0972B5D8F721404B1':
//               ele.controlValue = temp.name;
//               break;
//             // 工号
//             case 'CDC80FC12D1DE43018D098E8322D0F966':
//               ele.controlValue = temp.jobNum;
//               break;
//             // 公司
//             case 'CA8ABCC1480744557B3014C3454465A7E':
//               ele.controlValue = temp.companyId;
//               break;
//             // 部门
//             case 'CED44AC9966904CD1AB546D309903727C':
//               ele.controlValue = temp.departmentId;
//               break;
//             // 职位
//             case 'C7341027925C943708F3AEF98703ECC47':
//               ele.controlValue = temp.positionName;
//               break;
//             default:
//               break;
//           }
//           return ele;
//         }
//       );
//     }
//   },

//   {
//     deep: true
//   }
// );
</script>

<style lang="less" scoped>
.container {
  display: flex;

  .title-box {
    position: relative;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      border-radius: 4px;
      font-weight: 700;
      margin-bottom: 10px;
      background: #edeffd;
    }
  }

  .title-box::before {
    position: absolute;
    // top: 33px;
    left: 10px;
    display: inline-block;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    margin-right: 20px;
    border-radius: 2px;
    // transform: translateY(-50%);
    content: '';
    background-color: #165dff;
  }
}
</style>
